<template>
  <Tabs class="container" value="list">
    <Tab-pane label="商品列表" name="list">
      <div class="tool-wrap">
        <Form class="lf">
          <i-select v-model="searchForm.field" @on-change="searchFieldChange" style="width:100px">
            <i-option v-for="option in searchForm.options" :value="option.value" :key="option.value">{{option.label}}
            </i-option>
          </i-select>
          <i-select v-if="searchForm.field === 'manufacturer_id'" v-model="searchForm.value" style="width: 200px">
            <i-option v-for="manufacturer in manufacturerList" :value="manufacturer.id" :key="manufacturer.id">
              {{manufacturer.name}}
            </i-option>
          </i-select>
          <i-select v-else-if="searchForm.field === 'category_id'" v-model="searchForm.value" style="width: 200px">
            <i-option v-for="category in categoryList" :value="category.id" :key="category.id">{{category.name}}
            </i-option>
          </i-select>
          <i-input v-else v-model="searchForm.value" style="width: 200px"/>
          <i-button type="ghost" icon="search" @click="search()">搜索</i-button>
        </Form>
        <Button-group class="rf">
          <i-button type="ghost" icon="refresh" class="tool-btn" @click="refresh()">
            刷新
          </i-button>
          <i-button type="ghost" icon="plus" class="tool-btn" @click="showModal()">
            增加商品
          </i-button>
          <i-button type="ghost" icon="trash-a" class="tool-btn" @click="deleteList">批量删除商品</i-button>
        </Button-group>
      </div>
      <Table class="table-wrap" :data="goodsList" :columns="columns" @on-selection-change="checkChange">

      </Table>
      <Page class="page-wrap"
            :total="pageConfig.total"
            :current="pageConfig.page"
            :pageSize="pageConfig.pageSize"
            :page-size-opts="[10,20,30,50]"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            show-sizer
            show-elevator
            show-total
            placement="top">
      </Page>
    </Tab-pane>
    <Modal
      v-model="modal.show"
      class-name="vertical-center-modal"
      :title="modal.title">
      <i-form
        ref="modalForm"
        :model="modal.formData"
        :rules="modal.rules"
        :label-width="80">
        <Form-item label="商品名称" prop="name">
          <i-input v-model="modal.formData.name" placeholder="请输入商品名称"></i-input>
        </Form-item>
        <Form-item label="序列号" prop="sn">
          <i-input v-model="modal.formData.sn" placeholder="请输入商品序列号"></i-input>
        </Form-item>
        <Form-item label="分类">
          <i-select v-model="modal.formData.category_id">
            <i-option v-for="category in categoryList" :value="category.id" :key="category.id">{{category.name}}
            </i-option>
          </i-select>
        </Form-item>
        <Form-item label="厂家">
          <i-select v-model="modal.formData.manufacturer_id">
            <i-option v-for="manufacturer in manufacturerList" :value="manufacturer.id" :key="manufacturer.id">
              {{manufacturer.name}}
            </i-option>
          </i-select>
        </Form-item>
        <Form-item label="排序">
          <InputNumber v-model="modal.formData.sort" :min="0" style="width: 100%"></InputNumber>
        </Form-item>
        <Form-item label="搜索关键字">
          <i-input type="textarea" v-model="modal.formData.keyword" placeholder="请输入商品搜索关键字"></i-input>
        </Form-item>
        <Form-item label="描述">
          <i-input type="textarea" v-model="modal.formData.describe" placeholder="请输入商品描述"></i-input>
        </Form-item>
        <Form-item label="注意事项">
          <i-input type="textarea" v-model="modal.formData.remark" placeholder="请输入商品注意事项"></i-input>
        </Form-item>
      </i-form>
      <div slot="footer" class="cf modal-footer">
        <i-button class="rf" :loading="modal.loading" type="primary" @click="save()">保存</i-button>
        <i-button class="rf" @click="closeModal()" style="margin-right: 30px;">取消</i-button>
      </div>
    </Modal>
  </Tabs>
</template>
<script type="text/ecmascript-6">
  import goodsApi from '../../../api/admin/goods'
  var emptyData = {
    id: 0,
    sn: '',
    code: '',
    name: '',
    manufacturer_id: 0,
    category_id: 0,
    keyword: '',
    describe: '',
    sort: 0
  }
  export default{
    components: {},
    props: [],
    data () {
      const {$rules} = this
      return {
        searchForm: {
          field: 'name',
          value: '',
          options: [
            {value: 'name', label: '商品名称'},
            {value: 'manufacturer_id', label: '厂家'},
            {value: 'category_id', label: '分类'},
            {value: 'code', label: '编号'},
            {value: 'sn', label: '编码'}
          ]
        },
        categoryList: [],
        manufacturerList: [],
        goodsList: [],
        checkList: [],
        columns: [
          {
            width: 40,
            type: 'selection'
          },
          {
            title: '商品名称',
            key: 'name'
          },
          {
            title: '序列号',
            key: 'sn'
          },
          {
            title: '编号',
            key: 'code'
          },
          {
            title: '分类',
            key: 'manufacturer',
            render: (h, params) => {
              return params.row.category.name
            }
          },
          {
            title: '厂家',
            key: 'manufacturer',
            render: (h, params) => {
              return params.row.manufacturer.name
            }
          },
          {
            title: '搜索关键字',
            key: 'keyword'
          },
          {
            title: '描述',
            key: 'describe'
          },
          {
            title: '注意事项',
            key: 'remark'
          },
          {
            title: '操作',
            className: 'option-column',
            render: this.actionRender
          }
        ],
        pageConfig: {
          page: 1,
          pageSize: 10,
          total: 0
        },
        modal: {
          show: false,
          loading: false,
          title: '增加商品',
          formData: {...emptyData},
          rules: {
            name: [$rules.required, $rules.max_100],
            sn: [$rules.max_60],
            keyword: [$rules.max_100],
            describe: [$rules.max_200],
            remark: [$rules.max_200]
          }
        }
      }
    },
    methods: {
      actionRender (h, params) {
        let self = this
        return h('div', [
          h('Tooltip', {
            props: {
              content: '编辑',
              placement: 'top'
            }
          }, [
            h('Button', {
              props: {
                type: 'text',
                icon: 'edit'
              },
              on: {
                click: () => {
                  self.showModal(params.row)
                }
              }
            })
          ]),
          h('Tooltip', {
            props: {
              content: '删除',
              placement: 'top'
            }
          }, [
            h('Button', {
              props: {
                type: 'text',
                icon: 'trash-a'
              },
              on: {
                click: () => {
                  self.delete(params.row)
                }
              }
            })
          ])
        ])
      },
      searchFieldChange () {
        this.searchForm.value = ''
      },
      checkChange (rows) {
        this.checkList = rows
      },
      pageChange (page) {
        this.pageConfig.page = page
      },
      pageSizeChange (pageSize) {
        this.pageConfig.pageSize = pageSize
      },
      showModal (row) {
        const self = this
        self.modal.formData = {...emptyData}
        const {categoryList, manufacturerList, $Message} = self
        let formData = self.modal.formData
        if (categoryList.length === 0) {
          $Message.warning('请先添加分类')
          return
        }
        if (manufacturerList.length === 0) {
          $Message.warning('请先添加厂家')
          return
        }
        self.modal.title = '增加商品'
        formData.category_id = categoryList[0].id
        formData.manufacturer_id = manufacturerList[0].id
        if (row) {
          Object.assign(formData, row)
          self.modal.title = '编辑商品'
        }
        self.modal.show = true
      },
      closeModal () {
        this.modal.show = false
      },
      search () {
        this.getList()
      },
      refresh () {
        this.searchForm.value = ''
        this.getList()
      },
      getList () {
        const self = this
        goodsApi.getGoodsList({
          ...self.pageConfig,
          field: self.searchForm.field,
          value: self.searchForm.value
        }, data => {
          self.goodsList = data.data
          self.pageConfig.total = data.count
        })
      },
      save () {
        const self = this
        self.modal.loading = true
        self.$refs.modalForm.validate(valid => {
          if (!valid) {
            self.modal.loading = false
            return
          }
          goodsApi.saveGoods(self.modal.formData, () => {
            self.getList()
            self.$Message.success('保存成功')
            self.modal.loading = false
            self.modal.show = false
          }, () => {
            self.modal.loading = false
          })
        })
      },
      delete (row) {
        const self = this
        self.$isConfirm('确认删除商品', () => {
          goodsApi.deleteGoods(row.id, () => {
            self.getList()
          })
        })
      },
      deleteList () {
        const self = this
        let ids = []
        if (self.checkList.length === 0) {
          self.$Message.warning('请选择商品')
          return
        }
        self.checkList.forEach(item => {
          ids.push(item.id)
        })
        self.$isConfirm('确认删除商品', () => {
          goodsApi.deleteGoodsList(ids, () => {
            self.getList()
          })
        })
      },
      getCategoryManufacturer () {
        const self = this
        goodsApi.getCategoryManufacturer(data => {
          self.categoryList = data.category
          self.manufacturerList = data.manufacturer
          self.getList()
        })
      }
    },
    created () {
      this.getCategoryManufacturer()
    }
  }
</script>
<style lang="less">
</style>
